admin.js ➔ ... ➔ this.responsiveTabs - Code Metrics - Inspection of "Improved Scrutinizer config." - pronamic/wp-pronamic-ideal - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — develop ( fd8230...620707 )

by Remco

created 2018-04-06 07:27 UTC

admin.js ➔ ... ➔ this.responsiveTabs B

↳ Parent: Project

Complexity

Conditions	4
Paths	4

Size

Total Lines

Duplication

Lines	23
Ratio	100 %

Importance

Changes

Metric	Value
cc	4
nc	4
nop	0
dl	23
loc	23
rs	8.7972
c	0
b	0
f	0

/* global tippy */
( function( $ ) {
	/**
	 * Pronamic iDEAL config prototype
	 */
	var PronamicPayGatewayConfigEditor = function( element ) {
		var obj = this;
		var $element = $( element );

		// Elements
		var elements = {};
		elements.variantId          = $element.find( '#pronamic_gateway_id' );
		elements.extraSettings      = $element.find( 'div.extra-settings' );
		elements.sectionHeaders     = $element.find( '.gateway-config-section-header' );
		elements.tabs               = $element.find( '.pronamic-pay-tabs' );
		elements.tabItems           = $element.find( 'ul.pronamic-pay-tabs-items' );
		elements.pkCertFieldsToggle = $( '#pk-cert-fields-toggle' );

		/**
		 * Update config fields
		 */
		this.updateFields = function() {
			// Find selected variant
			obj.selectedVariant = elements.variantId.find( 'option:selected' );

			obj.settings = obj.selectedVariant.data( 'pronamic-pay-settings' );

			// Hide all settings
			$element.find( '.extra-settings' ).hide();

			// Show settings for variant
			obj.settingElements = [];

			if ( $.isArray( obj.settings ) ) {
				$.each( obj.settings, function( index, value ) {
					$element.find( '.setting-' + value ).show();
				} );
			}

			$element.find( '.setting-' + obj.selectedVariant.val() ).show();

			// Set name of first tab item to name of selected provider
			var providerName = obj.selectedVariant.text().split( ' - ' )[0].replace( / \(.*\)/, '' );

			elements.tabItems.find( ':visible' ).first().text( providerName ).click();

			$( '#pronamic-pay-gateway-description').html( obj.selectedVariant.attr( 'data-gateway-description' ) );

			if ( elements.pkCertFieldsToggle.length > 0 ) {
				elements.extraSettings.find( 'tr.pk-cert' ).hide();
			}
		};

		// Update row background color
		this.updateRowBackgroundColor = function() {
			// Set background color of visible even rows
			var rows = elements.extraSettings.find( '.form-table tr' );

			rows.removeClass( 'even' );
			rows.filter( ':visible:even' ).addClass( 'even' );
		};

		/**
		 * Tabs
		 */
		this.initTabs = function() {
			$.each(elements.sectionHeaders, function ( i, elm ) {
				var item = $( elm );
				var title = item.find( 'h4' ).text();
				var settingsClasses = item.parents( 'div' )[0].className;

				elements.tabItems.append(
					$( '<li>' + title + '</li>' ).addClass( settingsClasses ).removeClass( 'pronamic-pay-tab' )
				);
			} );

			// Move tab items list after 'Mode' setting
			elements.tabItems.next().after( elements.tabItems );

			elements.tabItems.find( 'li' ).click( obj.showTabSettings );
		};

		this.showTabSettings = function() {
			var tabItem = $( this );

			// Show tab
			elements.extraSettings.hide().eq( tabItem.index() ).show();
		};

		this.togglePkCertFields = function( e ) {
			if ( e.preventDefault ) {
				e.preventDefault();
			}

			if ( elements.pkCertFieldsToggle.hasClass( 'active' ) ) {
				elements.pkCertFieldsToggle.removeClass( 'active' );

				elements.extraSettings.find( 'tr.pk-cert' ).hide();
			} else {
				elements.pkCertFieldsToggle.addClass( 'active' );

				elements.extraSettings.find( 'tr.pk-cert' ).show();
			}

			obj.updateRowBackgroundColor();

			return false;
		};

		/**
		 * Function calls
		 */
		obj.initTabs();

		obj.updateFields();

		elements.variantId.change( obj.updateFields );

		elements.pkCertFieldsToggle.click( obj.togglePkCertFields );
	};

	/**
	 * jQuery plugin - Pronamic iDEAL config editor
	 */
	$.fn.pronamicPayGatewayConfigEditor = function() {
		return this.each( function() {
			var $this = $( this );

			if ( $this.data( 'pronamic-pay-gateway-config-editor' ) ) {
				return;
			}

			var editor = new PronamicPayGatewayConfigEditor( this );

			$this.data( 'pronamic-pay-gateway-config-editor', editor );
		} );
	};

	//////////////////////////////////////////////////

	/**
	 * Pronamic Pay Tabs
	 */
	var PronamicPayTabs = function( element ) {
		var obj = this;
		var $element = $( element );

		// Elements
		var elements = {};
		elements.tabItems = $element.find( 'ul.pronamic-pay-tabs-items' );
		elements.tabs     = $element.find( '.pronamic-pay-tab' );
		elements.tabItems = $element.find( 'ul.pronamic-pay-tabs-items' );

		// Update row background color
		this.updateRowBackgroundColor = function() {
			// Set background color of visible even rows
			var rows = elements.tabs.find( '.form-table tr' );

			rows.removeClass( 'even' );
			rows.filter( ':visible:even' ).addClass( 'even' );
		};

		/**
		 * Tabs
		 */
		this.showTab = function( ) {
			var tabItem = $( this );

			elements.tabItems.find( 'li' ).removeClass( 'active' );

			tabItem.addClass( 'active' );

			// Show tab
			elements.tabs.hide().eq( tabItem.index() ).show();

			obj.updateRowBackgroundColor();

			obj.visibleTabItems = elements.tabItems.find( 'li:visible' );

			obj.activeTabItem = tabItem;
		};

		this.responsiveTabs = function() {
			if ( $( window ).width() > 960 ) {
				elements.tabs.hide();

				if ( obj.activeTabItem ) {
					// Activate last active tab
					obj.activeTabItem.click();
				} else {
					// Make first tab active
					elements.tabItems.find( 'li:visible' ).first().click();
				}
			} else {
				if ( ! obj.visibleTabItems ) {
					return;
				}

				elements.tabs.hide();

				$.each( obj.visibleTabItems, function( index, tabItem ) {
					elements.tabs.eq( $( tabItem ).index() ).show();
				} );
			}
		};

		/**
		 * Function calls
		 */
		elements.tabItems.find( 'li' ).click( obj.showTab );

		// Make first tab active
		elements.tabItems.find( 'li:visible' ).first().click();

		$( window ).resize( obj.responsiveTabs );
	};

	/**
	 * jQuery plugin - Pronamic Pay Tabs
	 */
	$.fn.pronamicPayTabs = function() {
		return this.each( function() {
			var $this = $( this );

			if ( $this.data( 'pronamic-pay-tabs' ) ) {
				return;
			}

			var tabs = new PronamicPayTabs( this );

			$this.data( 'pronamic-pay-tabs', tabs );
		} );
	};

	//////////////////////////////////////////////////

	/**
	 * Pronamic pay gateway test
	 */
	var PronamicPayGatewayTest = function( element ) {
		var obj = this;
		var $element = $( element );

		// Elements
		var elements = {};
		elements.paymentMethods = $element.find( 'select[name="pronamic_pay_test_payment_method"]' );

		/**
		 * Update input visibility
		 */
		this.updateInputVisibility = function() {
			var method = elements.paymentMethods.val();

			if ( '' !== method ) {
				$element.find( '.pronamic-pay-test-payment-method' ).hide().filter( '.' + method ).show();
			}

			// Hide subscription options for unsupported payment methods.
			if ( 1 === elements.paymentMethods.find( 'option:selected' ).data( 'is-recurring' ) ) {
				$( '#pronamic-pay-test-subscription' ).parents( 'tr' ).show();
			} else {
				$( '#pronamic-pay-test-subscription' ).parents( 'tr' ).hide();
				$( '#pronamic-pay-test-subscription' ).prop( 'checked', false ).trigger( 'change' );
			}
		};

		// Function calls
		obj.updateInputVisibility();

		elements.paymentMethods.change( obj.updateInputVisibility );

		$element.on( 'keydown', 'input[name="test_amount"]', function( e ) {
			if ( 13 === e.keyCode) {
				$element.find('input[name="test_pay_gateway"]').click();
			}
		});
	};

	/**
	 * jQuery plugin - Pronamic pay gateway test
	 */
	$.fn.pronamicPayGatewayTest = function() {
		return this.each( function() {
			var $this = $( this );

			if ( $this.data( 'pronamic-pay-gateway-test' ) ) {
				return;
			}

			var gatewayTest = new PronamicPayGatewayTest( this );

			$this.data( 'pronamic-pay-gateway-test', gatewayTest );
		} );
	};

	//////////////////////////////////////////////////

	/**
	 * Pronamic iDEAL pay form options
	 */
	var PronamicPayFormOptions = function( element ) {
		var obj = this;
		var $element = $( element );

		// Elements
		var elements = {};
		elements.amountMethod = $element.find( 'select[name="_pronamic_payment_form_amount_method"]' );

		/**
		 * Update amounts visibility
		 */
		this.updateAmountsVisibility = function() {
			var method = elements.amountMethod.val();

			if ( method === 'choices_only' || method === 'choices_and_input' ) {
				$element.find('input[name="_pronamic_payment_form_amount_choices\[\]"]').closest('div').show();
			} else {
				$element.find('input[name="_pronamic_payment_form_amount_choices\[\]"]').closest('div').hide();
			}
		};

		/**
		 * Maybe add an empty amount field
		 */
		this.maybeAddAmountChoice = function() {
			elements.amountChoices = $element.find( 'input[name="_pronamic_payment_form_amount_choices\[\]"]' );
			var emptyChoices       = elements.amountChoices.filter( function() { return this.value === ''; } );

			if ( emptyChoices.length === 0 ) {
				var lastChoice = elements.amountChoices.last().closest( 'div' );
				var newChoice  = lastChoice.clone();
				var choiceId   = '_pronamic_payment_form_amount_choice_' + elements.amountChoices.length;

				newChoice.find( 'input' ).attr( 'id', choiceId ).val( '' );
				newChoice.find( 'label' ).attr( 'for', choiceId );

				lastChoice.after( newChoice );
			}
		};

		// Function calls
		obj.updateAmountsVisibility();

		elements.amountMethod.change( obj.updateAmountsVisibility );

		$element.on( 'keyup', 'input[name="_pronamic_payment_form_amount_choices\[\]"]', function() {
			obj.maybeAddAmountChoice();
		});
	};

	/**
	 * jQuery plugin - Pronamic iDEAL form options
	 */
	$.fn.pronamicPayFormOptions = function() {
		return this.each( function() {
			var $this = $( this );

			if ( $this.data( 'pronamic-pay-forms-options' ) ) {
				return;
			}

			var formOptions = new PronamicPayFormOptions( this );

			$this.data( 'pronamic-pay-form-options', formOptions );
		} );
	};

	/**
	 * Ready
	 */
	$( document ).ready( function() {
		$( '#pronamic-pay-gateway-config-editor' ).pronamicPayGatewayConfigEditor();
		$( '#pronamic_payment_form_options').pronamicPayFormOptions();
		$( '#pronamic_gateway_test').pronamicPayGatewayTest();
		$( '.pronamic-pay-tabs' ).pronamicPayTabs();

		// Tooltip
		tippy( '.pronamic-pay-tip', {
			arrow: true,
			theme: 'pronamic-pay'
		} );
	} );
} )( jQuery );


1			/* global tippy */
2			( function( $ ) {
3			/**
4			* Pronamic iDEAL config prototype
5			*/
6			var PronamicPayGatewayConfigEditor = function( element ) {
7			var obj = this;
8			var $element = $( element );
9
10			// Elements
11			var elements = {};
12			elements.variantId = $element.find( '#pronamic_gateway_id' );
13			elements.extraSettings = $element.find( 'div.extra-settings' );
14			elements.sectionHeaders = $element.find( '.gateway-config-section-header' );
15			elements.tabs = $element.find( '.pronamic-pay-tabs' );
16			elements.tabItems = $element.find( 'ul.pronamic-pay-tabs-items' );
17			elements.pkCertFieldsToggle = $( '#pk-cert-fields-toggle' );
18
19			/**
20			* Update config fields
21			*/
22			this.updateFields = function() {
23			// Find selected variant
24			obj.selectedVariant = elements.variantId.find( 'option:selected' );
25
26			obj.settings = obj.selectedVariant.data( 'pronamic-pay-settings' );
27
28			// Hide all settings
29			$element.find( '.extra-settings' ).hide();
30
31			// Show settings for variant
32			obj.settingElements = [];
33
34			if ( $.isArray( obj.settings ) ) {
35			$.each( obj.settings, function( index, value ) {
36			$element.find( '.setting-' + value ).show();
37			} );
38			}
39
40			$element.find( '.setting-' + obj.selectedVariant.val() ).show();
41
42			// Set name of first tab item to name of selected provider
43			var providerName = obj.selectedVariant.text().split( ' - ' )[0].replace( / \(.*\)/, '' );
44
45			elements.tabItems.find( ':visible' ).first().text( providerName ).click();
46
47			$( '#pronamic-pay-gateway-description').html( obj.selectedVariant.attr( 'data-gateway-description' ) );
48
49			if ( elements.pkCertFieldsToggle.length > 0 ) {
50			elements.extraSettings.find( 'tr.pk-cert' ).hide();
51			}
52			};
53
54			// Update row background color
55			this.updateRowBackgroundColor = function() {
56			// Set background color of visible even rows
57			var rows = elements.extraSettings.find( '.form-table tr' );
58
59			rows.removeClass( 'even' );
60			rows.filter( ':visible:even' ).addClass( 'even' );
61			};
62
63			/**
64			* Tabs
65			*/
66			this.initTabs = function() {
67			$.each(elements.sectionHeaders, function ( i, elm ) {
68			var item = $( elm );
69			var title = item.find( 'h4' ).text();
70			var settingsClasses = item.parents( 'div' )[0].className;
71
72			elements.tabItems.append(
73			$( '<li>' + title + '</li>' ).addClass( settingsClasses ).removeClass( 'pronamic-pay-tab' )
74			);
75			} );
76
77			// Move tab items list after 'Mode' setting
78			elements.tabItems.next().after( elements.tabItems );
79
80			elements.tabItems.find( 'li' ).click( obj.showTabSettings );
81			};
82
83			this.showTabSettings = function() {
84			var tabItem = $( this );
85
86			// Show tab
87			elements.extraSettings.hide().eq( tabItem.index() ).show();
88			};
89
90			this.togglePkCertFields = function( e ) {
91			if ( e.preventDefault ) {
92			e.preventDefault();
93			}
94
95			if ( elements.pkCertFieldsToggle.hasClass( 'active' ) ) {
96			elements.pkCertFieldsToggle.removeClass( 'active' );
97
98			elements.extraSettings.find( 'tr.pk-cert' ).hide();
99			} else {
100			elements.pkCertFieldsToggle.addClass( 'active' );
101
102			elements.extraSettings.find( 'tr.pk-cert' ).show();
103			}
104
105			obj.updateRowBackgroundColor();
106
107			return false;
108			};
109
110			/**
111			* Function calls
112			*/
113			obj.initTabs();
114
115			obj.updateFields();
116
117			elements.variantId.change( obj.updateFields );
118
119			elements.pkCertFieldsToggle.click( obj.togglePkCertFields );
120			};
121
122			/**
123			* jQuery plugin - Pronamic iDEAL config editor
124			*/
125			$.fn.pronamicPayGatewayConfigEditor = function() {
126			return this.each( function() {
127			var $this = $( this );
128
129			if ( $this.data( 'pronamic-pay-gateway-config-editor' ) ) {
130			return;
131			}
132
133			var editor = new PronamicPayGatewayConfigEditor( this );
134
135			$this.data( 'pronamic-pay-gateway-config-editor', editor );
136			} );
137			};
138
139			//////////////////////////////////////////////////
140
141			/**
142			* Pronamic Pay Tabs
143			*/
144			var PronamicPayTabs = function( element ) {
145			var obj = this;
146			var $element = $( element );
147
148			// Elements
149			var elements = {};
150			elements.tabItems = $element.find( 'ul.pronamic-pay-tabs-items' );
151			elements.tabs = $element.find( '.pronamic-pay-tab' );
152			elements.tabItems = $element.find( 'ul.pronamic-pay-tabs-items' );
153
154			// Update row background color
155			this.updateRowBackgroundColor = function() {
156			// Set background color of visible even rows
157			var rows = elements.tabs.find( '.form-table tr' );
158
159			rows.removeClass( 'even' );
160			rows.filter( ':visible:even' ).addClass( 'even' );
161			};
162
163			/**
164			* Tabs
165			*/
166			this.showTab = function( ) {
167			var tabItem = $( this );
168
169			elements.tabItems.find( 'li' ).removeClass( 'active' );
170
171			tabItem.addClass( 'active' );
172
173			// Show tab
174			elements.tabs.hide().eq( tabItem.index() ).show();
175
176			obj.updateRowBackgroundColor();
177
178			obj.visibleTabItems = elements.tabItems.find( 'li:visible' );
179
180			obj.activeTabItem = tabItem;
181			};
182
183			this.responsiveTabs = function() {
184			if ( $( window ).width() > 960 ) {
185			elements.tabs.hide();
186
187			if ( obj.activeTabItem ) {
188			// Activate last active tab
189			obj.activeTabItem.click();
190			} else {
191			// Make first tab active
192			elements.tabItems.find( 'li:visible' ).first().click();
193			}
194			} else {
195			if ( ! obj.visibleTabItems ) {
196			return;
197			}
198
199			elements.tabs.hide();
200
201			$.each( obj.visibleTabItems, function( index, tabItem ) {
202			elements.tabs.eq( $( tabItem ).index() ).show();
203			} );
204			}
205			};
206
207			/**
208			* Function calls
209			*/
210			elements.tabItems.find( 'li' ).click( obj.showTab );
211
212			// Make first tab active
213			elements.tabItems.find( 'li:visible' ).first().click();
214
215			$( window ).resize( obj.responsiveTabs );
216			};
217
218			/**
219			* jQuery plugin - Pronamic Pay Tabs
220			*/
221			$.fn.pronamicPayTabs = function() {
222			return this.each( function() {
223			var $this = $( this );
224
225			if ( $this.data( 'pronamic-pay-tabs' ) ) {
226			return;
227			}
228
229			var tabs = new PronamicPayTabs( this );
230
231			$this.data( 'pronamic-pay-tabs', tabs );
232			} );
233			};
234
235			//////////////////////////////////////////////////
236
237			/**
238			* Pronamic pay gateway test
239			*/
240			var PronamicPayGatewayTest = function( element ) {
241			var obj = this;
242			var $element = $( element );
243
244			// Elements
245			var elements = {};
246			elements.paymentMethods = $element.find( 'select[name="pronamic_pay_test_payment_method"]' );
247
248			/**
249			* Update input visibility
250			*/
251			this.updateInputVisibility = function() {
252			var method = elements.paymentMethods.val();
253
254			if ( '' !== method ) {
255			$element.find( '.pronamic-pay-test-payment-method' ).hide().filter( '.' + method ).show();
256			}
257
258			// Hide subscription options for unsupported payment methods.
259			if ( 1 === elements.paymentMethods.find( 'option:selected' ).data( 'is-recurring' ) ) {
260			$( '#pronamic-pay-test-subscription' ).parents( 'tr' ).show();
261			} else {
262			$( '#pronamic-pay-test-subscription' ).parents( 'tr' ).hide();
263			$( '#pronamic-pay-test-subscription' ).prop( 'checked', false ).trigger( 'change' );
264			}
265			};
266
267			// Function calls
268			obj.updateInputVisibility();
269
270			elements.paymentMethods.change( obj.updateInputVisibility );
271
272			$element.on( 'keydown', 'input[name="test_amount"]', function( e ) {
273			if ( 13 === e.keyCode) {
274			$element.find('input[name="test_pay_gateway"]').click();
275			}
276			});
277			};
278
279			/**
280			* jQuery plugin - Pronamic pay gateway test
281			*/
282			$.fn.pronamicPayGatewayTest = function() {
283			return this.each( function() {
284			var $this = $( this );
285
286			if ( $this.data( 'pronamic-pay-gateway-test' ) ) {
287			return;
288			}
289
290			var gatewayTest = new PronamicPayGatewayTest( this );
291
292			$this.data( 'pronamic-pay-gateway-test', gatewayTest );
293			} );
294			};
295
296			//////////////////////////////////////////////////
297
298			/**
299			* Pronamic iDEAL pay form options
300			*/
301			var PronamicPayFormOptions = function( element ) {
302			var obj = this;
303			var $element = $( element );
304
305			// Elements
306			var elements = {};
307			elements.amountMethod = $element.find( 'select[name="_pronamic_payment_form_amount_method"]' );
308
309			/**
310			* Update amounts visibility
311			*/
312			this.updateAmountsVisibility = function() {
313			var method = elements.amountMethod.val();
314
315			if ( method === 'choices_only' \|\| method === 'choices_and_input' ) {
316			$element.find('input[name="_pronamic_payment_form_amount_choices\[\]"]').closest('div').show();
317			} else {
318			$element.find('input[name="_pronamic_payment_form_amount_choices\[\]"]').closest('div').hide();
319			}
320			};
321
322			/**
323			* Maybe add an empty amount field
324			*/
325			this.maybeAddAmountChoice = function() {
326			elements.amountChoices = $element.find( 'input[name="_pronamic_payment_form_amount_choices\[\]"]' );
327			var emptyChoices = elements.amountChoices.filter( function() { return this.value === ''; } );
328
329			if ( emptyChoices.length === 0 ) {
330			var lastChoice = elements.amountChoices.last().closest( 'div' );
331			var newChoice = lastChoice.clone();
332			var choiceId = '_pronamic_payment_form_amount_choice_' + elements.amountChoices.length;
333
334			newChoice.find( 'input' ).attr( 'id', choiceId ).val( '' );
335			newChoice.find( 'label' ).attr( 'for', choiceId );
336
337			lastChoice.after( newChoice );
338			}
339			};
340
341			// Function calls
342			obj.updateAmountsVisibility();
343
344			elements.amountMethod.change( obj.updateAmountsVisibility );
345
346			$element.on( 'keyup', 'input[name="_pronamic_payment_form_amount_choices\[\]"]', function() {
347			obj.maybeAddAmountChoice();
348			});
349			};
350
351			/**
352			* jQuery plugin - Pronamic iDEAL form options
353			*/
354			$.fn.pronamicPayFormOptions = function() {
355			return this.each( function() {
356			var $this = $( this );
357
358			if ( $this.data( 'pronamic-pay-forms-options' ) ) {
359			return;
360			}
361
362			var formOptions = new PronamicPayFormOptions( this );
363
364			$this.data( 'pronamic-pay-form-options', formOptions );
365			} );
366			};
367
368			/**
369			* Ready
370			*/
371			$( document ).ready( function() {
372			$( '#pronamic-pay-gateway-config-editor' ).pronamicPayGatewayConfigEditor();
373			$( '#pronamic_payment_form_options').pronamicPayFormOptions();
374			$( '#pronamic_gateway_test').pronamicPayGatewayTest();
375			$( '.pronamic-pay-tabs' ).pronamicPayTabs();
376
377			// Tooltip
378			tippy( '.pronamic-pay-tip', {
379			arrow: true,
380			theme: 'pronamic-pay'
381			} );
382			} );
383			} )( jQuery );
384

pronamic / wp-pronamic-ideal

Push — develop ( fd8230...620707 )

admin.js ➔ ... ➔ this.responsiveTabs B

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like